<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- import CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css"
    />
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="emp.name" placeholder="员工姓名" />
      <input type="text" v-model="emp.salary" placeholder="员工工资" />
      <input type="text" v-model="emp.job" placeholder="员工工作" />
      <input type="button" value="添加" @click="add()" />
      <el-table :data="arr">
        <el-table-column prop="name" label="姓名" width="200"></el-table-column>
        <el-table-column
          prop="salary"
          label="工资"
          width="200"
        ></el-table-column>
        <el-table-column prop="job" label="工作" width="200"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </body>
  <!-- import Vue before Element -->
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
  <script>
    let v = new Vue({
      el: "#app",
      data: function () {
        return {
          emp: { name: "", salary: "", job: "" },
          arr: [
            { name: "刘备", salary: "3000", job: "销售" },
            { name: "关羽", salary: "4000", job: "人事" },
            { name: "张飞", salary: "5000", job: "程序员" },
          ],
        };
      },
      methods: {
        add() {
          v.arr.push({
            name: v.emp.name,
            salary: v.emp.salary,
            job: v.emp.job,
          });
        },
        handleDelete(i, emp) {
          v.arr.splice(i, 1);
          v.$message("删除了" + emp.name + "的信息！");
        }
      },
    });
  </script>
</html>
